<template>
  <div class="editor-container">
    <div class="body-box" style="width: 12%; height: 100%;">
      <div class="body">
        <div class="left-card" v-for="(item, index) in auditPrivilegeList">
            <div class="left-button" :class="{changeStyle:changeSelectStyle == item}" @click="changeStyle(item)">
              <span>{{item}}</span>
            </div>
        </div>
      </div>
    </div>
    <div class="body-box" style="width: 88%; height: 100%;">
      <div class="body">
        <!-- 标签区域 -->
        <div style="height: 5%; width: 100%;">
          <div style="float:left; height: 100%; width: 20%; display: flex; align-items: center; padding-left: 10px">
            <div class="status-point" style="float:left; background-color: #FFBA00"></div>
            <span style="margin-left: 10px; margin-right: 10px">待办数量</span>
            <div style="width: 18%; font-size: 10px; border-radius: 10px; background-color: #e5e3e3; display: flex; justify-content: center; align-items: center;">
              <span>{{pagination.total+'个'}}</span>
            </div>
          </div>
        </div>

        <!-- 主体内容区域 -->
        <div style="height: 90%; width: 100%;">
          <div v-for="(item, index) in auditInfo" style="float:left; height: 33%; width: 25%; padding: 5px;">
            <div style="height: 100%; width: 100%; border: 1px solid #a4d4f8; border-radius: 5px; padding: 10px">
              <!-- 项目名称区域 -->
              <div style="height: 20%; width: 100%; font-weight: bold; display: flex; align-items: center;">
                <span style=" display :inline-block ;width: 100%; overflow: hidden; textOverflow: ellipsis; whiteSpace: nowrap" :title='item.projectName' >
                  {{item.projectName}}
                </span>
              </div>

              <!-- 分隔线 -->
              <div style="float: left; width: 100%; height: 1px; border-top: 1px solid #a4d4f8"></div>

              <!-- 其他内容区域 -->
              <div style="height: 80%; width: 100%;">
                <div style="float: left; height: 100%; width: 60%; font-size: 12px; padding-top: 10px">
                  <!-- 左内容 -->
                  <div class="content-left" style="float: left; height: 100%; width: 40%;">
                    <div class="tag-box" style="height:25%; width: 100%; padding: 5px;">
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '一级审核'">{{'合同名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '二级审核'">{{'合同名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '三级审核'">{{'合同名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '比价审核'">{{'设备名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '最终审核'">{{'设备名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '技术审核'">{{'设备名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '商务审核'">{{'设备名 :'}}</el-tag>
                      <el-tag size="mini" style="float: right" v-if="changeSelectStyle == '用章审核'">{{'合同名 :'}}</el-tag>
                    </div>
                    <div class="tag-box" style="height:25%; width: 100%; padding: 5px;">
                      <el-tag size="mini" style="float: right">{{'送审人 :'}}</el-tag>
                    </div>
                    <div class="tag-box" style="height:25%; width: 100%; padding: 5px;">
                      <el-tag size="mini" style="float: right">{{'时间 :'}}</el-tag>
                    </div>
                    <div class="tag-box" style="height:25%; width: 100%; padding: 5px;">
                      <el-tag size="mini" style="float: right">{{'操作 :'}}</el-tag>
                    </div>
                  </div>
                  <!-- 右内容 放标签 -->
                  <div class="content-right" style="float: left; height: 100%; width: 60%;">
                    <div class="tag-box" style="height:25%; width: 100%; padding-top: 6px; overflow: hidden; textOverflow: ellipsis; whiteSpace: nowrap" :title='item.contractName'>
                      <span>{{item.itemName}}</span>
                    </div>
                    <div class="tag-box" style="height:25%; width: 100%; padding-top: 6px;">
                      <span>{{item.sender}}</span>
                    </div>
                    <div class="tag-box" style="height:25%; width: 100%; padding-top: 5px;  overflow: hidden; textOverflow: ellipsis; whiteSpace: nowrap" :title='dateTimeFormat(item.sendTime)'>
                      {{dateTimeFormat(item.sendTime)}}
                    </div>
                    <div class="tag-box" style="height:25%; width: 100%; padding-top: 5px;">
                      <!--<div class="left-button" style="height:92%; width: 40%; border: 1px solid #cccccc; border-radius: 5px">-->
                      <div class="left-button" style="font-size: 10px; width: 60%;" @click="open(item)">
                        <span>前往</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div style="float: left; height: 100%; width: 40%; padding: 5px">
                  <svg-icon style="height: 100%; width: 100%;" icon-class="backlog_daishenhe"></svg-icon>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页区域 -->
        <div style="height: 5%; width: 100%;">
          <div style="height: 100%; width: 100%; text-align: right; padding-right: 10px">
            <a-pagination
              :pageSizeOptions="pagination.pageSizeOptions"
              size="small"
              :pageSize="pagination.pageSize"
              :current="pagination.pageNum"
              :total="pagination.total"
              show-quick-jumper
              :show-total="pagination.showTotal"
              @change="pagination.onChange"/>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import '@/styles/auto-style.css'
  import { dateTimeFormat,nullFormat } from '@/utils/format'
  import {getAction, postActionByJson, postActionByQueryString} from "@/api/manage"

  export default {
    data() {
      return {
        url: {
          selectUserAuditPrivilege: '/backLogAudit/selectUserAuditPrivilege',
          selectFirstAuditInfo: '/backLogAudit/selectFirstAuditInfo',
          selectSecondAuditInfo: '/backLogAudit/selectSecondAuditInfo',
          selectThirdAuditInfo: '/backLogAudit/selectThirdAuditInfo',
          selectCompareAuditInfo: '/backLogAudit/selectCompareAuditInfo',
          selectFinallyAuditInfo: '/backLogAudit/selectFinallyAuditInfo',
          selectTechnicalAuditInfo: '/backLogAudit/selectTechnicalAuditInfo',
          selectBusinessAuditInfo: '/backLogAudit/selectBusinessAuditInfo',
          selectChapterAuditInfo: '/backLogAudit/selectChapterAuditInfo',
        },
        auditPrivilegeList: [],
        list: [],
        auditInfo: [],
        firstAudit: {
          firstAuditInfo: [],
          firstAuditTotal: 0
        },
        secondAudit: {
          secondAuditInfo: [],
          secondAuditTotal: 0
        },
        thirdAudit: {
          thirdAuditInfo: [],
          thirdAuditTotal: 0
        },
        compareAudit: {
          compareAuditInfo: [],
          compareAuditTotal: 0
        },
        finallyAudit: {
          finallyAuditInfo: [],
          finallyAuditTotal: 0
        },
        technicalAudit: {
          technicalAuditInfo: [],
          technicalAuditTotal: 0
        },
        businessAudit: {
          businessAuditInfo: [],
          businessAuditTotal: 0
        },
        chapterAudit: {
          chapterAuditInfo: [],
          chapterAuditTotal: 0
        },
        pagination: {
          showTotal: total => `共 ${total} 条结果`,
          showQuickJumper: true,
          pageNum: 1,
          pageSize: 12,
          total: 0,
          onChange: (pageNum) =>  {
            this.pagination.pageNum = pageNum
            this.toSearch()
          },
        },
        changeSelectStyle:'',
      }
    },
    async created() {
      await this.selectUserAuditPrivilege()
      for (const item of this.auditPrivilegeList) {
        switch (item) {
          case '一级审核': await this.selectFirstAuditInfo(); break;
          case '二级审核': await this.selectSecondAuditInfo(); break;
          case '三级审核': await this.selectThirdAuditInfo(); break;
          case '比价审核': await this.selectCompareAuditInfo(); break;
          case '最终审核': await this.selectFinallyAuditInfo(); break;
          case '技术审核': await this.selectTechnicalAuditInfo(); break;
          case '商务审核': await this.selectBusinessAuditInfo(); break;
          case '用章审核': await this.selectChapterAuditInfo(); break;
        }
      }
      await this.changeStyle(this.auditPrivilegeList[0])
    },
    methods: {
      open(item) {
        switch (this.changeSelectStyle) {
          case '一级审核': this.$router.push({ path: "/purchase/check/first", query: {projectId: item.projectId, auditStatus: '0'}}); break;
          case '二级审核': this.$router.push({ path: "/purchase/check/second", query: {projectId: item.projectId, auditStatus: '0'}}); break;
          case '三级审核': this.$router.push({ path: "/purchase/check/third", query: {projectId: item.projectId, auditStatus: '0'}}); break;
          case '商务审核': this.$router.push({ path: "/proCheck/business", query: {proId: item.projectId, status: '0'}}); break;
          case '比价审核': this.$router.push({ path: "/compare/new", query: {projectName: item.projectName}}); break;
          case '最终审核': this.$router.push({ path: "/proCheck/final", query: {proId: item.projectId, name: item.itemName}}); break;
          case '技术审核': this.$router.push({ path: "/proCheck/technical", query: {proId: item.projectId, status: '3'}}); break;
          case '用章审核': this.$router.push({ path: "/chapter/check", query: {projectName: item.projectName, auditStatus: '0'}}); break;
        }
      },
      dateTimeFormat,
      changeStyle(name) {
        this.auditInfo = []
        this.changeSelectStyle = name
        switch (name) {
          case '一级审核': this.auditInfo = this.firstAudit.firstAuditInfo; this.pagination.total = this.firstAudit.firstAuditTotal; break;
          case '二级审核': this.auditInfo = this.secondAudit.secondAuditInfo; this.pagination.total = this.secondAudit.secondAuditTotal; break;
          case '三级审核': this.auditInfo = this.thirdAudit.thirdAuditInfo; this.pagination.total = this.thirdAudit.thirdAuditTotal; break;
          case '比价审核': this.auditInfo = this.compareAudit.compareAuditInfo; this.pagination.total = this.compareAudit.compareAuditTotal; break;
          case '最终审核': this.auditInfo = this.finallyAudit.finallyAuditInfo; this.pagination.total = this.finallyAudit.finallyAuditTotal; break;
          case '技术审核': this.auditInfo = this.technicalAudit.technicalAuditInfo; this.pagination.total = this.technicalAudit.technicalAuditTotal; break;
          case '商务审核': this.auditInfo = this.businessAudit.businessAuditInfo; this.pagination.total = this.businessAudit.businessAuditTotal; break;
          case '用章审核': this.auditInfo = this.chapterAudit.chapterAuditInfo; this.pagination.total = this.chapterAudit.chapterAuditTotal; break;
        }
      },
      async toSearch() {
        switch (this.changeSelectStyle) {
          case '一级审核': await this.selectFirstAuditInfo(); break;
          case '二级审核': await this.selectSecondAuditInfo(); break;
          case '三级审核': await this.selectThirdAuditInfo(); break;
          case '比价审核': await this.selectCompareAuditInfo(); break;
          case '最终审核': await this.selectFinallyAuditInfo(); break;
          case '技术审核': await this.selectTechnicalAuditInfo(); break;
          case '商务审核': await this.selectBusinessAuditInfo(); break;
          case '用章审核': await this.selectChapterAuditInfo(); break;
        }
        this.changeStyle(this.changeSelectStyle)
      },
      async selectUserAuditPrivilege() {
        this.auditPrivilegeList = []
        await getAction(this.url.selectUserAuditPrivilege)
          .then(resp => {
            let split = resp.data.auditPrivilege.split(',');
            split.forEach(item => {
              this.auditPrivilegeList.push(item)
            })
          })
      },
      async selectFirstAuditInfo() {
        this.firstAudit.firstAuditInfo = []
        await getAction(this.url.selectFirstAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.firstAudit.firstAuditInfo = resp.data.records
            this.firstAudit.firstAuditTotal = resp.data.total
          })
      },
      async selectSecondAuditInfo() {
        this.secondAudit.secondAuditInfo = []
        await getAction(this.url.selectSecondAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.secondAudit.secondAuditInfo = resp.data.records
            this.secondAudit.secondAuditTotal = resp.data.total
          })
      },
      async selectThirdAuditInfo() {
        this.thirdAudit.thirdAuditInfo = []
        await getAction(this.url.selectThirdAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.thirdAudit.thirdAuditInfo = resp.data.records
            this.thirdAudit.thirdAuditTotal = resp.data.total
          })
      },
      async selectCompareAuditInfo() {
        this.compareAudit.compareAuditInfo = []
        await getAction(this.url.selectCompareAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.compareAudit.compareAuditInfo = resp.data.records
            this.compareAudit.compareAuditTotal = resp.data.total
          })
      },
      async selectFinallyAuditInfo() {
        this.finallyAudit.finallyAuditInfo = []
        await getAction(this.url.selectFinallyAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.finallyAudit.finallyAuditInfo = resp.data.records
            this.finallyAudit.finallyAuditTotal = resp.data.total
          })
      },
      async selectTechnicalAuditInfo() {
        this.technicalAudit.technicalAuditInfo = []
        await getAction(this.url.selectTechnicalAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.technicalAudit.technicalAuditInfo = resp.data.records
            this.technicalAudit.technicalAuditTotal = resp.data.total
          })
      },
      async selectBusinessAuditInfo() {
        this.businessAudit.businessAuditInfo = []
        await getAction(this.url.selectBusinessAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.businessAudit.businessAuditInfo = resp.data.records
            this.businessAudit.businessAuditTotal = resp.data.total
          })
      },
      async selectChapterAuditInfo() {
        this.chapterAudit.chapterAuditInfo = []
        await getAction(this.url.selectChapterAuditInfo, {'pageNum': this.pagination.pageNum, 'pageSize': this.pagination.pageSize})
          .then(resp => {
            this.chapterAudit.chapterAuditInfo = resp.data.records
            this.chapterAudit.chapterAuditTotal = resp.data.total
          })
      }
    },
  }

</script>

<style lang="scss" scoped>
 .editor-container {
   position: absolute;
   width: 100%;
   height: 100%;
   padding: 5px;
   background-color: #d0dae8;
   .body-box {
     float: left;
     padding: 5px;
     .body {
       width: 100%;
       height: 100%;
       background-color: #ffffff;
       padding: 5px;
       border-radius: 5px;
       .left-card {
         width: 100%;
         height: 10%;
         padding: 10px;
         .changeStyle{
           cursor:pointer;
           color: #20a0ff;
           border: 1px solid #20a0ff;
         }
       }
     }
   }
   .status-point {
     display: inline-block;
     width: 10px;
     height: 10px;
     border-radius: 50%;
   }
   .left-button {
     width: 100%;
     height: 100%;
     border: 1px solid #bbbbbb;
     border-radius: 5px;
     text-align: center;
     font-family: 微软雅黑;
     font-size: 15px;
     font-weight: bold;
     cursor: pointer;
     /* 垂直水平居中*/
     display:flex;
     justify-content:center;
     align-items:center;
   }
   .left-button span {
     cursor: pointer;
     display: inline-block;
     position: relative;
     transition: 0.5s;
   }
   .left-button span:after {
     content: '»';
     position: absolute;
     opacity: 0;
     top: 0;
     right: -20px;
     transition: 0.5s;
   }
   .left-button:hover span {
     padding-right: 20px;
   }
   .left-button:hover span:after {
     opacity: 1;
     right: 0;
   }
 }
</style>
